<template>
	<view class="dep-box">
		<view class="top-bar">
			<text class="iconfont icon-jiqiren_o"></text>
			<text class="iconfont icon-icon_sousuo"></text>
			<input type="text">
		</view>
		<view style="height: 60px;"></view>
		<view class="content">
			<view class="content-left">
				<view :class="['dep-item',isselect==index? 'active': '']"  @click="select(item.registrationDepartment,index)" v-for="(item,index) in List" key="index">{{item.registrationDepartment}}</view>
			</view>
			<view style="height: 60px;width: 120px;"></view>
			<view class="content-right">
				<view class="department" >
				    <view class="dep-name" v-for="(item,index) in deptList" key="index" @click="chooseDoctor(item.phone,item.docid)">
						<view class="avatar"> 
							<img :src="item.avatar" alt="医生头像" srcset="">
						 </view>
						 
						 <view class="doctor-info">
							 <div class="doctor-name"> {{item.name}} </div>
							 <div class="doctor-title"> {{item.title}} </div>
							 
							 <div class="goodat">  {{ item.goodAt }} </div>
						 </view>
						
					
					
					
					
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		data
	} from "./department.js"
	export default{
		data(){
			return{
				isselect:0,
				List:'',
				deptList:''
				
			}
		},
		onLoad(){
			// console.log(data.data.deptList[0].deptList)
			// this.List = data.data.deptList[0].deptList
			// this.deptList=this.List[0].deptList
			uni.request({
				url:'http://192.168.36.46:3000/doctor/alldeparentment'
			}).then( res => {
				console.log( "res=>",res.data.data)
				this.List = res.data.data
			})
			
		},
		methods:{
			// 选择科室
			select(registrationDepartment,index){
				this.isselect = index
				uni.request({
					url:'http://192.168.36.46:3000/doctor/getDocByDeparentment?department='+registrationDepartment+'&limit=1'
				}).then( res => {
					console.log( "选中的参数=>",res )
					this.deptList = res.data.data
				})
			},
			// 选择医生
			chooseDoctor(phone,id){
				uni.navigateTo({
					url:'/pages/doctorInfo/doctorInfo?doctorPhone='+phone+'&doctorId='+id
				})
			}
			
		},
	}
</script>

<style lang="scss">
	*{
		padding: 0px;
		margin: 0px;
	}
	.dep-box{
		width: 100%;
		height: 100vh;
		position: relative;
		.top-bar{
		  width: 100%;
		  position: fixed;
			input{
			width: 90%;
			height: 45px;
			background-color: #f7f7f7;
			outline: none;
			border: none;
			border-radius: 30px;
			margin: 10px auto;
			text-indent: 80px;
		}
		.icon-jiqiren_o,.icon-icon_sousuo{
			position: absolute;
		}
		.icon-jiqiren_o{
			left: 35px;
			top: 22px;
			font-weight: 800;
			font-size: 20px;
			color: #74cdb9;
			border-right: 1px solid gainsboro;
			padding-right: 9px;
		}
		.icon-icon_sousuo{
			left: 70px;
			top: 22px;
			font-size: 20px;
			
		}
	}

		.content{
			width: 95%;
			margin: 10px auto;
			// background-color: #f7f8fa;
			// display: flex;
			margin-bottom: 0px;
			.content-left{
				width: 120px;
				box-sizing: border-box;
				position: fixed;
				top:113px;
				padding-left: 10px;
				padding-right: 10px;
				background-color: #f7f8fa;
				height: 83vh;
				overflow-y: scroll;
				background-image: linear-gradient(#fdfdff,#f6f7f9);
				.dep-item{
					font-size: 16px;
					line-height: 45px;
				}
				.active{
					color: #74cdb9;
					position: relative;
					&::after{
						content: '';
						display: inline-block;
						width: 5px;
						height: 20px;
						border-radius: 10px;
						background-color: #74cdb9;
						position: absolute;
						right: -10px;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
			.content-right{
				width: 224px;
				position: fixed;
				top:113px;
				height: 83vh;
				right: 6px;
				overflow-y: scroll;
				padding-left: 8px;
				padding-right: 8px;
				background-color: #f6f7f9;
				.dep-name{
					width: 225px;
					background-color: #fff;
					border-radius: 10px;
					line-height: 50px;
					margin-top: 20px;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					padding: 5px;
					.avatar{
						width: 85px;
						height: 95px;
						border-radius: 5px;
						
						img{
							width: 85px;
							height: 95px;
							border-radius: 5px;
						}
					}
					.doctor-info{
						margin-left: 10px;
						.doctor-name{
							line-height: 30px;
							font-weight: 600;
						}
						.doctor-title{
							line-height: 30px;
							font-size: 14px;
						}
						.goodat{
							  line-height: 20px;
							  overflow: hidden;
							  display: -webkit-box;
							  -webkit-line-clamp: 2; /* 设置最大显示行数 */
							  -webkit-box-orient: vertical;
							  text-overflow: ellipsis;
							  font-size: 14px;
						}
						
					}
				}
				
			}
		}
	
	
	}
</style>